<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在线引用 bootstrap css    -->
    <!-- CSS only -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!--在线引用 jquery    -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="input-group mb-3" style="display: inline-flex">
    <input type="text" id="mytext" class="form-control" placeholder="请输入姓名" aria-label="Recipient's username" aria-describedby="button-addon2">
    <button class="btn btn-outline-secondary" onclick="myClick()" type="button" id="button-addon2" style="background: #2aabd2">姓名查询</button>
</div>
<table class="table table-bordered">
    <caption>教师信息表</caption>
    <thead>
    <tr>
        <th>工号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>部门</th>
    </tr>
    </thead>
    <tbody id="teacherTb">
<!--    <tr data-th-each="teacher:${data}">-->

<!--        <td data-th-text="${teacher.tno}"></td>-->
<!--        <td data-th-text="${teacher.tname}"></td>-->
<!--        <td data-th-text="${teacher.tsex}"></td>-->
<!--        <td data-th-text="${teacher.tage}"></td>-->
<!--        <td data-th-text="${teacher.sdept}"></td>-->
<!--    </tr>-->
    </tbody>
</table>

<!-- JavaScript Bundle with Popper -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">

    $(function () {

        $.ajax({
            url:"/webapi/teacher/list"
        }).done(function (rs) {
            console.log("dsd")
            let len=rs.length;
            let  html="";
            for(let i=0;i<len;i++) {
                let item=rs[i];
                if (i%2==0) {
                    html += "<tr class='shuangshu'>"
                        + "<td>" + item.tno + "</td>"
                        + "<td>" + item.tname + "</td>"
                        + "<td>" + item.tsex + "</td>"
                        + "<td>" + item.tage + "</td>"
                        + "<td>" + item.sdept + "</td>"
                        + "</tr>";
                } else {
                    html += "<tr class='danshu'>"
                        + "<td>" + item.tno + "</td>"
                        + "<td>" + item.tname + "</td>"
                        + "<td>" + item.tsex + "</td>"
                        + "<td>" + item.tage + "</td>"
                        + "<td>" + item.sdept + "</td>"
                        + "</tr>";
                }
            }

            $("#teacherTb").html(html);
        })
    })
    function myClick () {
        var textName = document.getElementById("mytext").value;

        var urlName = "/webapi/teacher/" + textName;
        //console.log("url=" + myUrl);


        $.ajax({
            url: urlName
        }).done(function (rs) {
            console.log("dsd")
            let len = rs.length;
            let html = "";
            for (let i = 0; i < len; i++) {
                let item = rs[i];
                if (i % 2 == 0) {
                    html += "<tr class='shuangshu'>"
                        + "<td>" + item.tno + "</td>"
                        + "<td>" + item.tname + "</td>"
                        + "<td>" + item.tsex + "</td>"
                        + "<td>" + item.tage + "</td>"
                        + "<td>" + item.sdept + "</td>"
                        + "</tr>";
                } else {
                    html += "<tr class='danshu'>"
                        + "<td>" + item.tno + "</td>"
                        + "<td>" + item.tname + "</td>"
                        + "<td>" + item.tsex + "</td>"
                        + "<td>" + item.tage + "</td>"
                        + "<td>" + item.sdept + "</td>"
                        + "</tr>";
                }
            }

            $("#teacherTb").html(html);
        })
    }

</script>
<style>
    #teacherTb {
        padding: 0;
        margin: 0;
    }
    caption {
        padding: 0 0 5px 0;
        width: 700px;
        font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        text-align: right;
    }
    .danshu{
        background-color: aqua;
    }
    .shuangshu{
        background-color: aquamarine;
    }

</style>
</body>
</html>